<template>
    <div class="comment">
        <h2 v-if="!isComment">评论</h2>
        <div class="comment-sub flex" v-if="!isComment">
            <div class="el-col-2">
                <img :src="logoUrl + this.$store.state.userinfo.logo" alt="" v-if="this.$store.state.haslogin">
                <img v-else src="../../static/img/def-user-logo.png" alt="user-avatar">
            </div>
            <div class="el-col-22">
                <h3>{{this.$store.state.haslogin ? this.$store.state.userinfo.username : '游客'}}</h3>
                <el-input
                    v-model.trim="commentText"
                    placeholder="请输入您的评论"
                    type="textarea"
                    :rows="3"
                    maxlength="200"
                    class="st-mw"
                    show-word-limit></el-input>
                <div style="text-align: right">
                    <el-button class="el-button--primary" @click="submitComment('A')">发送</el-button>
                </div>
            </div>
        </div>

        <P class="total" v-if="commentList.length >0">所有评论{{commentList.length}}条</P>

        <el-row :gutter="20" class="comment-list" v-for="(cl, index) in commentList" :key="index">
            <el-col :span="2">
                <img src="../../static/img/def-user-logo.png" alt="avatar" v-if="cl.commnetUserType === 'VISITOR'">
                <img :src="logoUrl + cl.userLogo" alt="avatar" v-else>
            </el-col>
            <el-col :span="22" class="el-list-22" :class="cl.subEvaluationNum === 0 ? 'no-bottom' : ''">
                <div class="user"><span>{{cl.commnetUserType === 'VISITOR' ? '游客' : cl.createUserName}}</span> {{cl.commnetDate}}</div>
                <p class="dec">{{cl.commnetBody}}</p>
                <div v-if="isShowScore" class="marginr">
                    <span>交易金额：{{cl.orderTotalPrice||0}}</span><span>质量：{{cl.quality}}</span><span>速度：{{cl.speed}}</span><span>服务：{{cl.service}}</span>
                </div>

                <!--数量以及操作按钮-->
                <div class="handle-btn flex flex-between">
                    <div>
                        回复{{cl.subEvaluationNum}}条
                        <a href="javaScript:;" @click="handleOpenReplyList(cl, index)" v-if="cl.subEvaluationNum > 0">{{cl.flag ? '收起' : '展开'}}
                            <i :class="cl.flag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                        </a>
                    </div>
                    <el-button class="reply-btn" @click="handleReply(cl, index, 'reply', 'reply')">回复</el-button>
                </div>

                <!--回复框-->
                <div class="reply" style="display: none">
                    <el-input v-model.trim="replyText"
                              placeholder="回复"
                              type="textarea"
                              :rows="4"
                              maxlength="200"
                              show-word-limit
                    ></el-input>
                    <div class="reply-control-btn">
                        <el-button class="ins-btn" @click="handleReply(cl, index, 'reply', 'cancel')">取消</el-button>
                        <el-button class="ins-btn" @click="handleReply(cl, index, 'reply', 'submit')">提交</el-button>
                    </div>
                </div>

                <!--回复列表-->
                <div class="reply-list" v-if="cl.flag">
                    <div class="r-l-bottom flex" v-for="(clR, cindex) in commentSubList" :key="cindex">
                        <div class="rlb-2">
                            <img src="../../static/img/def-user-logo.png" alt="avatar" v-if="clR.commnetUserType === 'VISITOR'">
                            <img src="" alt="avatar" v-else>
                        </div>
                        <div class="rlb-22">
                            <div>
                                <div class="w-t-w" v-if="clR.commnetUserType === 'WEBSITE'">
                                    <span>{{clR.createUserName}}</span>
                                </div>
                                <span v-else>游客</span>
                            </div>
                            <p>{{clR.commnetBody}}</p>
                            <!-- TODO 三级回复暂时隐藏 -->
                            <!--<div class="flex flex-between">
                                <div>{{clR.commnetDate}}</div>
                                <el-button class="reply-btn close-b-btn" @click="twoLevelReply('ins-reply', cindex)">回复</el-button>
                            </div>

                            <div class="ins-reply" style="display: none">
                                <el-input v-model.trim="replyText"
                                          placeholder="回复"
                                          type="textarea"
                                          :rows="4"
                                          maxlength="200"
                                          show-word-limit
                                ></el-input>
                                <div class="reply-control-btn">
                                    <el-button class="ins-btn" @click="handleTwoReply(clR, cindex, 'ins-reply','cancel')">取消</el-button>
                                    <el-button class="ins-btn" @click="handleTwoReply(clR, cindex, 'ins-reply', 'submit')">提交</el-button>
                                </div>
                            </div>-->

                        </div>
                    </div>
                </div>

            </el-col>
        </el-row>

        <div class="prev-next">
            <el-pagination background
                           v-if="total > 0"
                           :current-page="params.pageNumber"
                           :page-sizes="[100, 200, 300, 400]"
                           :page-size="params.pageSize"
                           layout="prev, pager, next"
                           @current-change="changePage"
                           :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Prop,
    Emit,
    Component
} from 'nuxt-property-decorator'

import {
    sumbitCommentApi,
    commentListApi,
    commentSubListApi
} from '~/api/community/article/index'
import {
    State,
    Mutation
} from 'vuex-class'

@Component({
    name: 'test',
    components: {}
})
export default class PageCommentView extends Vue {
    logoUrl: String = this.$store.state.basefile
    params: any = {
        commnetBody: '', // 评论内容
        commnetSourceId: '', // 供方服务ID、需方需求ID、新闻ID、社群专家ID
        commnetSoruceType: '', // 供方SUPPLY,//需方DEMAND,//新闻NEWS,//专家EXPERT;
        commnetSoruceCode: '', // 有订单，则传递此订单编号评价的数据源编号* 订单的编号
        commnetUserType: '', // 网站用户WEBSITE,//游客VISITOR;
        commnetUserId: '', // 评价用户ID
        createUserId: '', // 评价用户ID
        modifyUserId: '', // 评价用户ID
        quality: '', // 质量
        speed: '', // 速度
        service: '', // 服务
        parentId: '' // 所属评价的父节（可选）
    }
    total: Number = 0
    commentText: String = ''
    replyText: any = ''
    listParams: any = {
        sourceType: '', // 供方SUPPLY,//需方DEMAND,//新闻NEWS,//专家EXPERT;//店铺SHOP
        commnetSourceId: '',
        pageNumber: 1,
        pageSize: 10
    }
    commentList: any = []
    commentSubList: any = []
    isActive: Boolean = false
    replyData: any = {}
    indexCur: any = ''
    openTwoType: Boolean = false
    @Prop() commentType !: String
    @Prop() commentId !: Number | String
    @Prop({
        default: false,
        required: false
    }) isComment !: boolean
    @Prop({
        default: false,
        required: false
    }) isShowScore !: boolean
    // 对接接口方法
    /**
     * 提交 */
    submitComment () {
        if (this.commentText !== '') {
            this.params.commnetBody = this.commentText
            this.submitFn()
        } else {
            this.$message.error('请输入您的评论')
        }
    }
    changePage (val: Number) {
        this.listParams.pageNumber = val
        this.getCommentList()
    }
    /**
     * 评论列表 */
    async getCommentList () {
        const form = {...this.listParams}
        form.sourceType = this.commentType
        form.commnetSourceId = this.commentId
        const {data}: any = await commentListApi(form)
        if (data.code >= 0) {
            const array = data.data.content
            this.total = data.data.totalElements
            array.forEach((i: any) => {
                this.$set(i, 'flag', false)
            })
            this.commentList = array
            this.commentList = data.data.content
            this.$emit('getLength', this.commentList.length)
        }
    }
    /**
     * 子集评论列表 */
    async getCommentSubList (id: any) {
        const {data}: any = await commentSubListApi({parentId: id})
        if (data.code >= 0) {
            this.commentSubList = data.data
        }
    }
    /**
     * 公用提交方法 */
    async submitFn () {
        const form = {...this.params}
        form.commnetSoruceType = this.commentType
        form.commnetSourceId = this.commentId
        form.commnetUserType = this.$store.state.haslogin ? 'WEBSITE' : 'VISITOR'
        form.commnetUserId = this.$store.state.haslogin ? this.$store.state.userinfo.id : ''
        form.createUserId = this.$store.state.haslogin ? this.$store.state.userinfo.id : ''
        form.modifyUserId = this.$store.state.haslogin ? this.$store.state.userinfo.id : ''
        const {data}: any = await sumbitCommentApi(form)
        if (data.code >= 0) {
            this.$message.success('评论成功')
            this.getCommentList()
            this.commentText = ''
            this.replyText = ''
            if (this.openTwoType) {
                this.handlerOpenClose(this.replyData, this.indexCur)
            }
        }
    }
    // 逻辑方法
    /**
     * 展示收起方法 */
    handlerOpenClose (data: any, index: any) {
        if (!data.flag) {
            this.isActive = false
        } else {
            this.isActive = true
        }
        this.commentList.forEach((item: any, ins: any) => {
            if (index === ins) {
                data.flag = !this.isActive
            } else {
                item.flag = false
            }
        })
        // this.commonFun('reply', index)
    }
    /**
     * 公用方法展示收起方法 */
    commonFun (str: String, index: any) {
        const strVal = '.' + str
        const replyFrame = this.$el.querySelectorAll(strVal) as any

        for (let j = 0, len = replyFrame.length; j < len; j++) {
            if (index === j) {
                if (replyFrame[j].style.display === 'none') {
                    replyFrame[j].style.display = 'block'
                } else {
                    replyFrame[j].style.display = 'none'
                }
            }
            if (index !== j && replyFrame[j].style.display === 'block') {
                replyFrame[j].style.display = 'none'
            }
        }
    }
    /**
     * 打开回复列表 */
    handleOpenReplyList (data: any, index: any) {
        this.handlerOpenClose(data, index)
        this.getCommentSubList(data.id)
    }
    twoLevelReply (className: String, index: Number) {
        this.commonFun(className, index)
        const reply = this.$el.querySelectorAll('.reply') as any
        for (let k = 0, len = reply.length; k < len; k++) {
            if (reply[k].style.display === 'block') {
                reply[k].style.display = 'none'
            }
        }
    }
    /**
     * 三级回复 */
    handleTwoReply (data: any, index: Number, className: String, str: String) {
        switch (str) {
            case 'cancel':
                this.commonFun(className, index)
                break
            case 'submit':
                this.params.parentId = data.id
                this.params.commnetBody = this.replyText
                this.submitFn()
                this.commonFun(className, index)
                break
        }
    }
    /**
     * data 接口数据源
     * classname 样式名称
     * str 类型
     * */
    handleReply (data: any, index: Number, className: String, str: String) {
        switch (str) {
            case 'reply':
                this.replyData = data
                this.indexCur = index
                this.openTwoType = true
                this.commonFun(className, index)
                const reply = this.$el.querySelectorAll('.ins-reply') as any
                for (let k = 0, len = reply.length; k < len; k++) {
                    if (reply[k].style.display === 'block') {
                        reply[k].style.display = 'none'
                    }
                }

                this.commentList.forEach((item: any) => {
                    if (item.flag === true) {
                        item.flag = false
                    }
                })
                break
            case 'cancel':
                if (className === 'reply') {
                    this.commonFun(className, index)
                } else if (className === 'ins-reply') {
                    this.commonFun(className, index)
                }
                break
            case 'submit':
                if (this.replyText !== '') {
                    this.params.parentId = data.id
                    this.params.commnetBody = this.replyText
                    this.submitFn()
                    this.commonFun(className, index)
                } else {
                    this.$message.error('请输入您的回复')
                }
        }
    }
    mounted () {
        this.getCommentList()
    }
}

</script>

<style lang="scss" scoped>
    /*
        单独抽取出来使用
        样式变量都放在此处
    */
    $defaultColor: #666a75;
    $timeColor: #a9b0b4;
    $btnModelColor: #a5a5a5;
    $controlModelColor: #11a9e8;
    $defaultFontSize: 16px;
    $minFontSize: 14px;
    $borderColor: #f2f2f4;
    .comment {
        color: $defaultColor;
        padding-bottom: 200px;

        h2{
            padding-bottom: 20px;
            font-size: 18px;
            color: #383d4d;
        }
        .comment-sub {
            border-bottom: 1px solid $borderColor;

            .el-col-2 {
                text-align: left;
                img {
                    display: block;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
            }

            .el-col-22 {
                h3 {
                    padding-bottom: 15px;
                    text-align: left;
                    font-size: $defaultFontSize;
                }

                .st-mw{
                    width: 100%;
                }

                .el-button--primary {
                    margin: 15px 0
                }
            }
        }

        .total {
            padding: 20px 20px 0 20px;
            font-size: 18px;
        }

        .comment-list {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 20px;
            /*border-bottom: 1px solid #ddd;*/

            .reply-control-btn {
                padding: 15px 0 0px;
                text-align: right;
                .ins-btn{
                    padding: 9px 30px;
                    &:hover{
                        background: #fff;
                        color: #333;
                        border: 1px solid #11a9e8;
                    }
                }
            }

            .el-col-2 {
                img {
                    margin: 0 auto;
                    display: block;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
            }

            .el-col-22 {
                border-bottom: 1px solid #ddd;
                .user {
                    font-size: $minFontSize;
                    color: $timeColor;
                }

                .dec {
                    padding: 10px 0 15px;
                }

                .marginr{
                    span{
                        margin-right: 20px;
                    }
                }

                .handle-btn {
                    padding-bottom: 20px;
                    font-size: $minFontSize;
                    color: $btnModelColor;

                    a {
                        color: $controlModelColor;
                    }

                    .reply-btn {
                        border: none!important;
                        padding: 0;
                        font-size: $minFontSize;
                        color: $controlModelColor;
                    }
                }

                .reply {
                    padding: 15px 0;
                    border-bottom: 1px solid $borderColor;
                }

                .reply-list,.ins-reply {
                    img {
                        margin: 0 auto;
                        display: block;
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                    }

                    .r-l-bottom {
                        flex: 1;
                        padding: 10px 0;
                        // border-bottom: 1px solid $borderColor;
                        border-bottom: 1px solid #ddd;

                        .rlb-22 {
                            margin-left: 20px;
                            div {
                                font-size: $minFontSize;
                                color: $timeColor;
                            }

                            p {
                                padding: 10px 0 15px;
                            }

                            .reply-btn {
                                border: none;
                                padding: 0;
                                font-size: $minFontSize;
                                color: $controlModelColor;
                            }
                        }
                    }

                    .r-l-bottom:last-child {
                        border-bottom: none;
                    }
                }
                .ins-reply{
                    width: 100%;
                    padding-top: 20px;
                }
            }

            .no-bottom{
                /*border-bottom: none;*/
            }
        }
    }

    .prev-next{
        padding: 20px 0;
        text-align: center;
    }
</style>
